﻿{% extends "gma/base.html" %}
{% load static %}
{% load mytag %}

{% block extra_css %}
    <link href="{% static 'css/inspinia.css' %}" rel="stylesheet">
    <link href="{% static 'css/inspinia_custom.css' %}" rel="stylesheet">
{% endblock extra_css %}

<!-- CONTENT
  =====================================================================-->

{% block content %}

<div class="page__bd">

{#    <div class="weui-panel weui-panel_access">#}
{#        <div class="weui-panel__hd"> <i class="fa fa-user"></i> 用户 ({{ user.uid }} ~ {{ target.uid }}) </div>#}

    <div class="weui-cells__title"> <i class="fa fa-user"></i> 用户 ({{ user.uid }} ~ {{ target.uid }})</div>
    <div class="weui-cells">
        {% if user.avatar %}
        <a href="{% url 'gma:caster_detail' user.uid %}" class="weui-media-box weui-media-box_appmsg weui-cell_access">
            <div class="weui-cell__bd"> <p>{{ user.nickname }}</p> </div>
            <div class="weui-cell__ft"> <img src="{{ user.avatar|cdn }}" class="right_large_avatar"> </div>
        </a>
        {% endif %}

        {% if target.uid == 120001 %}
        <div class="weui-cell">
            <div class="weui-cell__bd"> <p> 已读 </p> </div>
            <div class="weui-cell__ft">
                <label for="switch_read" class="weui-switch-cp">
                    <input id="switch_read" class="weui-switch-cp__input" type="checkbox" {{ is_readed }} onclick="readMessage()" />
                    <div class="weui-switch-cp__box"></div>
                </label>
            </div>
        </div>
        {% endif %}
{#    </div>#}
    </div>

    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd"> <i class="fa fa-comments"></i> 聊天内容</div>

        <div class="chat-discussion">
            {% for msg in messages %}
                {% if msg.show_time %}
                    <div class="chat-message-time2"> {{ msg.create_time|date:"Y-m-d H:i:s" }} </div>
                {% endif %}

                {% if msg.uid == user.uid %}
                    <div class="chat-message right">
                        <img class="message-avatar" src="{{ user.avatar|cdn }}">
                        {% if msg.is_image_url %}
                            <div class="img-message">
                                <span > <img class="chat-img-content" src="{{ msg.message }}" onerror="javascript:this.src='http://misc.app.res.mqnetswork.com/not_find.png'"> </span>
                            </div>
                        {% else %}
                            <div class="message2">
                                <span class="chat-message-content"> {{ msg.message }} </span>
                            </div>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="chat-message left">
                        <img class="message-avatar" src="{{ target.avatar|cdn }}">
                        {% if msg.is_image_url %}
                            <div class="img-message">
                                <span class="chat-img-content"> <img class="chat-img-content" src="{{ msg.message }}" onerror="javascript:this.src='http://misc.app.res.mqnetswork.com/not_find.png'"> </span>
                            </div>
                        {% else %}
                            <div class="message">
                                <span class="chat-message-content"> {{ msg.message }} </span>
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd"> <i class="fa fa-comment-dots"></i> 回复消息</div>

        <div class="weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" id="hx_message" placeholder="请输入回复内容 ......" rows="3"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="weui-btn-area">
    <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:send_hx_message()"> <i class="fa fa-comment-dots"></i> 发送 </a>
    <a class="weui-btn weui-btn_block weui-btn_primary" href="{% url 'gma:private_message_list' 120001 %}"> <i class="fa fa-home"></i> 返回 </a>
</div>

<div class="page__ft">
    <a href="{% url 'gma:home' %}">
        <span class="bottom-logo">
           HiBao
       </span>
    </a>
</div>

{% endblock content %}

<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script>

{% if target.uid == 120001 %}
function readMessage() {
    let url = "{% url 'gma:api_read_message' %}";

    if ($('#switch_read').is(':checked')) {
        let data = {
            'uid': {{ user.uid }},
            'is_readed': 1,
        };

        new my_ajax(url, data, '', '', () => {
            show_toast(`标记为已读!`);

        });
    } else {
        let data = {
            'uid': {{ user.uid }},
            'is_readed': 0,
        };

        new my_ajax(url, data, '', '', () => {
            show_toast(`标记为未读!`);

        });
    }
}
{% endif %}

function send_hx_message() {
    const hx_message = $('#hx_message').val();
    if (!hx_message) {
        alert("发送的内容不可以为空！");
        return;
    }

    let url = '{% url 'gma:api_send_hx_message' %}';
    let data = {
        'uid': {{ user.id }},
        'message': hx_message,
    };
    new my_ajax(url, data, '', '', () => {
        show_toast('发送成功');
        $('#hx_message').val('');
        window.location.reload();
    });
}

</script>


{% endblock extra_js %}